<template>
    <div class="main">
       <el-breadcrumb separator="/">
            <el-breadcrumb-item >管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/ment/management' }">人员管理</el-breadcrumb-item>
            
        </el-breadcrumb>
        <el-row v-if="userlist" >
            <el-table
            stripe
            :data="userlist.slice((page-1)*pageSize,pageSize*page)"
            style="width:100%"
            class="tableinfo margintop20"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
               <el-table-column label="#" type="index"></el-table-column>
               <el-table-column label="名字" prop="username"></el-table-column>
               <el-table-column label="电话" prop="mobile"></el-table-column>
                <el-table-column label="登录密码" prop="password"></el-table-column>
                <el-table-column label="职位" sortable prop="roleid">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.roleid | colorname">{{scope.row.roleid | rolename}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="管理">
                     <template slot-scope="scope">
                         <el-col class="btnbox">
                        <el-popconfirm
                            confirmButtonText='yes'
                            cancelButtonText='no'
                            icon="el-icon-info"
                            iconColor="red"
                            title="真的要开除这位员工吗"
                            @onConfirm="del(scope.row)"
                            >
                            <el-button slot="reference" type="danger" size="small" plain style="margin-right:10px">开除</el-button>
                            </el-popconfirm>
                            <el-button type="warning" size="small"  @click="updateone(scope.row)">职位</el-button>
                    </el-col>
                    </template>
                 </el-table-column>
            </el-table>
            <div style="display:flex; align-items:center">
                     <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :current-page="page"
                    @current-change="currenchange"
                    :total="total">
                    </el-pagination>
                    <span>共{{total}}跳数据</span>
                </div>
        </el-row>

         <el-dialog
            title="修改以用户"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form 
                :model="form" 
                :rules="rules"
                ref="myform" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="手机号码" prop="mobile">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" ></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="roleid">
                    <el-select v-model="form.roleid" > 
                        <el-option v-for="(role,i) in roleList" 
                            :key="i"
                            :label="role.label"
                            :value="role.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input  type="password" v-model="form.password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateById()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
 import {user,updateoper,deloper} from "@/api"
 import {roleList} from "@/utils"
export default {
    mounted(){
        user({
            username:this.form.search
        })
        .then(res=>{
            console.log(res)
            this.userlist = res.result
        })
    },
   data(){
       return {
           userlist:[],
            pageSize:5,
            page:1,
            form:{},
            dialogVisible:false,
            roleList,
             rules:{   // 表单校验 
                mobile:[
                    {required:true,message:"请输入手机号码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/
                            if(mobileReg.test(value)){
                                callback()
                            }else{
                                callback(new Error("请输入正确的手机号码"));
                            }
                        },
                        trigger:'change'
                    }
                ],
                password:[
                    {required:true,message:"请输入登录密码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
                ],
                roleid:[
                    {required:true,message:"请选择用户角色类型",trigger:"change"}
                ],
                username:[
                    {required:true,message:"请输入用户名称",trigger:"blur"}
                ],
            }

        
       }
   },
   computed:{
        total(){
            return this.userlist.length
        }
    },
   methods:{
        updateById(){
            this.$refs.myform.validate((valid)=>{
                if(valid){
                    var roleid = sessionStorage.getItem("roleid")
                     if(roleid < this.form.roleid){
                          this.$message.error("权限过低，无法操作")
                     }else{
                         updateoper(this.form)
                        .then(res=>{
                            this.dialogVisible = false
                            this.userlist.forEach((item,i)=>{
                                if(item._id == this.form._id){
                                    this.form.roleid = this.form.roleid + ""
                                    Vue.set(this.userlist,i,this.form)
                                }
                            })
                    
                    })
                    .catch(err=>{

                    })
                     }  
                }else{
                    return false
                }
            })
        },
       del(row){
           var roleid = sessionStorage.getItem("roleid")
            var mobile = localStorage.getItem("mobile")
            console.log(roleid)
            if(roleid < row.roleid){
                this.$message.error("权限过低，无法操作")
            }else if(mobile == row.mobile){
                this.$message.error("不能开除自己")
            }else{
                deloper({
                id:row._id
            }).then(res=>{
                if(res.type){
                    this.userlist = this.userlist.filter(item=>item._id !== row._id)
                }
            })
            }
           
       },
        updateone(row){
            this.dialogVisible = true
            this.form = {...this.form,...row}
        },
        currenchange(current){
            this.page = current
        },
        handleClose(){
            this.dialogVisible = false
        },
   }
}
</script>

<style lang="scss" scoped>
.aa{
    display: flex;
    align-items: center;
}
::v-deep .cell{
    font-size: 10px !important;
}

::v-deep .el-input{
    width: 250px;

}

::v-deep .el-button--success{
    height: 40px;
    padding: 0 18px;
}
</style>